BOM - setTimeout
setTimeout kunnen we de tijd in JavaScript controleren. I.p.v. van het ene statement zo snel mogelijk na het andere te laten uitvoeren zegt setTimeout tegen het programma een beetje te wachten, even op adem te komen vooraleer het volgende statement uit te voeren.Een callback functie
De functie heeft twee parameters. De eerste parameter bevat de instructie. Dit kan één statement zijn of een een functie met verschillende statements erin die je wilt laten uitvoeren nadat de wachttijd, die je in de tweede parameter hebt opgegeven, verlopen is. De functie die je in de eerste parameter hebt opgegeven wordt ook wel een callback genoemd. De instructie kan de naam van een functie zijn of een anonieme functie. We geven eerst een voorbeeld van hoe je de naam van een functie doorgeeft. Hieronder geven we een voorbeeld van hoe jeen anonieme functie - een functie zonder naam - als parameter doorgeeft.
De functie met de naam wachten, of de anonieme functie, worden een callback functie genoemd.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - De tijd controleren met JS - setTimeout</title>
<meta charset="utf-8" />
<meta name="application-name" content="Multimedia JavaScript">
<meta name="description" content="De tijd controleren met JS - setTimeout">
<meta name="keywords" content="HTML, JavaScript, setTimeout">
<meta name="author" content="Jef Inghelbrecht">
<script type="text/javascript">
setTimeout(wachten, 6000);
function wachten() {
alert('Heb je lang moeten wachten?');
};
</script>
</head>
<body>
<p>Binnen 6 seconden zal er een alert messagebox getoond worden...</p>
</body>
</html>
Sla bovenstaande code op in een bestand met de naam setTimeout.html. Als de pagina uitvoert zie je onmiddellijk de tekst verschijnen "Binnen 6 seconden zal er een alert messagebox getoond worden...". Na 6 seconden, je kan het aftellen, verschijn inderdaad een alertbox.
Wat gebeurt er als je setTimeout(wachten, 6000); midden in een blok code plaatst?
Dat statement zal worden uitgesteld tot de wachttijd is afgelopen, maar alle andere statements die erop volgen worden onmiddellijk uitgevoerd. Als setTimeout voor de eerste keer wordt uitgevoerd wordt een timer gemaakt die aftelt tot het moment dat het statement moet worden uitgevoerd.
Als we een timer willen stoppen vooraleer het aftellen is beëindigd moeten we de timer in een variabele opslaan en die doorgeven aan een de functie clearTimeout. Die functie zal het aftellen onmiddellijk stilzetten en de geplande taak zal nooit worden uitgevoerd:
var timer = setTimeout(wachten, 4000); clearTimeout(timer);
Je kan ook een anonieme functie als parameter doorgeven aan de SetTimeout functie. Het voordeel van een anonieme functie is dat je geen aparte functie met een eigen naam moet maken. Als je de code van de anonieme functie meer dan één keer wilt gebruiken, verdwijnt dat voordeel natuurlijk.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - De tijd controleren met JS - setTimeout</title>
<meta charset="utf-8" />
<meta name="application-name" content="Multimedia JavaScript">
<meta name="description" content="De tijd controleren met JS - setTimeout">
<meta name="keywords" content="HTML, JavaScript, setTimeout">
<meta name="author" content="Jef Inghelbrecht">
<script type="text/javascript">
setTimeout(wachten, 6000);
function wachten() {
alert('Heb je lang moeten wachten?');
};
// met anonieme functie (functie zonder naam)
var timer2 = setTimeout(function() {alert('Ik ben sneller dan de eerste timer!');}, 2000);
</script>
</head>
<body>
<p>Binnen 6 seconden zal er een alert messagebox getoond worden...</p>
<p>Maar na 2 seconden al wordt een eerste alert messagebox getoond :)
Alhoewel we die later in gang hebben gezet.</p>
</body>
</html>